<template>
  <div class="speech-lib-wrap">
    <van-tabs v-model="activeName" @click="clickTabs" ref="tabsPlu">
      <template v-for="(item,i) in tab_list">
        <van-tab v-if="item.is_enabled" :title="item.name" :name="item.value" :key="i"></van-tab>
      </template>
    </van-tabs>
    <van-divider hairline style="margin: 0;" />
    <div class="search-box">
      <van-search v-model="wordKey" shape="round" background="#fff" placeholder="请输入搜索" show-action @search="searchMaterial" >
        <template slot="left-icon">
          <van-icon name="arrow-left" v-if="searchShow" @click="closeSearchShow"/>
        </template>
        <template #right-icon>
          <div class="search-btn" @click="searchMaterial">搜索</div>
        </template>
        <template #action v-if="activeName == 'script_library'">
          <div @click="add_handle" class="main-color"><i class="iconfont icon-icon_add" style="font-size: 0.75rem; margin-right: 3px;"></i>新增</div>
        </template>
      </van-search>
    </div>
    <div class="contain">
      <div class="left-sidebar-box" v-if="groupData.length > 0 && !searchShow">
        <div v-for="(item, index) in groupData" :key="index" :class="['side-item', { active: groupId == item.id }]" @click="changeGroup(item.id)">{{ item.group_name||item.name }}</div>
      </div>

      <!-- 这块内容滚动，其他悬浮 -->
      <div class="right-content">

        <div  class="child-category" v-if="activeName == 'script_library'&&groupId!==0&&(child_group&&child_group.length!==0)">
          <div v-for="(item,i) in child_group" :key="i" @click="change_child(item,i)" :class="i==child_active?'child-category-item-c':'child-category-item'">{{ item.group_name }}</div>
        </div>

        <div class="childSidebar_box" v-if="(activeName == 'goods' || activeName == 'communities') && !searchShow" :class="showMoreClass?'childSidebar_box-postion':'childSidebar_box-sticky'">
          <div class="childSidebar" :class="showMoreClass?'childSidebarWarp':'childSidebarScroll'">
            <div class="childSidebar_nav" v-for="(item,index) in groupTwoData" :key="index" @click="changeTwoGroup(item.id)"
            :class="{'defultVal':(item.id == groupTwoId),'childSidebar_nav_Warp':showMoreClass}">{{item.name}}</div>
          </div>
          <div class="childSideBar-thr" v-if="groupThrData.length > 0 && showMoreClass && activeName == 'goods'">
            <div class="twoSpan">{{TwoName()}}</div>
            <div class="childSidebar_nav-thr"  >
              <div class="navthr" @click="changeThrGroup(thritem.id)" :class="{'defultVal-thr':(thritem.id == groupThrId)}" v-for="(thritem,index) in groupThrData" :key="index" >{{thritem.name}}</div>
            </div>
          </div>
          <van-icon name="arrow-down" @click="showMoreClass = true" v-if="!showMoreClass && (groupTwoData.length > 2 || groupThrData.length > 0)" />
          <div style="height: 2rem;"></div>
          <div  @click="showMoreClass = false" v-if="showMoreClass" class="closeThr" >点击收起<van-icon name="arrow-up"  /></div>
        </div>

        <div class="material-box" :class="{'mt-40':child_group.length==0}" v-if="materialList.length > 0 && activeName == 'script_library'">
          <div class="material-item" v-for="matItem in materialList" :key="matItem.id">
            <div class="top">
              <div class="material-name">
                <span>{{ matItem.material_name }}</span>
                <span>（{{ matItem.content_list.length }}）</span>
              </div>
              <div v-if="fun.isPc()" class="btn sendAll-btn" @click="batchSendMessage(matItem.id)">一键发送</div>
            </div>
            <div class="message-list" v-for="(messItem, index) in matItem.content_list" :key="index">
              <div class="message-item" v-if="messItem.content">
                <div class="message-content">
                  <!-- 文本 -->
                  <div v-if="messItem.content.type == 'text'" class="message-text" v-html="messItem.content.news"></div>
                  <!-- 图片 -->
                  <div v-if="messItem.content.type == 'image'" class="img-box" @click="imagePreview(messItem.content.link_img)">
                    <img :src="messItem.content.link_img" alt="" />
                  </div>
                  <!-- h5 -->
                  <div v-if="messItem.content.type == 'link'" class="h5-box">
                    <img class="h5-img" :src="messItem.content.link_img" alt="" />
                    <div class="h5-text">
                      <p class="h5-title">{{ messItem.content.title }}</p>
                      <span class="desc">{{ messItem.content.describe }}</span>
                    </div>
                  </div>
                  <!-- 小程序 -->
                  <div v-if="messItem.content.type == 'applet'" class="min-pro-box">
                    <div class="min-title">{{ messItem.content.title }}</div>
                    <img class="min-img" :src="messItem.content.link_img" alt="" />
                    <div class="min-icon">
                      <i class="iconfont icon-all_smallprogram"></i>
                      小程序
                    </div>
                  </div>
                  <!-- 视频 -->
                  <div v-if="messItem.content.type == 'video'" class="video-box">
                    <video controls>
                      <source :src="messItem.content.link_video" />
                      您的浏览器不支持 video 标签。
                    </video>
                  </div>
                  <!-- 文件 -->
                  <div v-if="messItem.content.type == 'file'" class="file-box">
                    <van-icon name="description" />
                    <span>{{ messItem.condition }}</span>
                  </div>
                </div>
                <div v-if="agentConfigLoading == 1" class="btn send-btn" @click="sendMessage(matItem.id, index,messItem.id)">发送</div>
                <div v-else-if="agentConfigLoading == 0" class="btn send-btn">加载中</div>
              </div>
            </div>
          </div>
        </div>
        <otherList @sendMsgChild="sendChatMessageChildList" :isSignWorkApp="isSignWorkApp" @onLoad="onLoad" ref="otherList" :loading="loading" :finished="finished"
        :contextList="contextList" :activeName="activeName" v-if="activeName != 'script_library'"></otherList>

        <yz-blank :datas="materialList" text="空空如也" v-if="activeName == 'script_library'"></yz-blank>
        <yz-blank :datas="contextList" text="空空如也" v-else ></yz-blank>
      </div>
    </div>
    <van-dialog v-model="show_add_dialog" style="width: 18.75rem"  show-cancel-button :show-cancel-button="false" :show-confirm-button="false">
        <div class="dialog-popup">
          <div class="dialog-popup-title">新增话术库</div>
          <div class="dialog-popup-form">
            <span>素材名称</span>
            <div style="flex:1;">
              <input v-model="material_name" type="text"  placeholder="请输入"/>
            </div>
          </div>
          <div class="dialog-popup-form" style="margin-bottom: 0;">
            <span>排序</span>
            <div style="flex:1;">
              <input v-model.number="sort" type="text"  placeholder="请输入"/>
      
            </div>
          </div>
          <div class="dialog-popup-tips">默认0，数值大的排在前面</div>
          <div class="dialog-popup-form">
            <span style="align-self: baseline;padding-top: 0.5625rem;">素材分类</span>
            <div style="flex:1;">
              <div class="select" @click="first_select_falg=!first_select_falg">
                <span  :class="first_category?'color-242424':'color-acacac'">{{first_category||'请选择一级分类'}}</span><van-icon :name="!first_select_falg?'arrow-up':'arrow-down'" />
                <ul v-if="first_select_falg">
                  <li v-for="item in category_list" :key="item.id" @click.stop="choose_handle(1,item)">{{item.group_name}}</li>
                </ul>
              </div>
              <div class="select" @click="second_select_falg=!second_select_falg" style="margin-bottom: 0;">
                <span :class="second_category?'color-242424':'color-acacac'">{{second_category||'请选择二级分类'}}</span><van-icon :name="!second_select_falg?'arrow-up':'arrow-down'" />
                <ul v-if="second_select_falg">
                  <li v-for="item in child_category" :key="item.id" @click.stop="choose_handle(2,item)">{{item.group_name}}</li>
                  <li v-if="child_category.length==0">暂无二级分类</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="dialog-popup-form">
            <span>素材类型</span>
            <div style="flex:1;">
              <div class="select" @click="type_flag=!type_flag" style="margin-bottom: 0;">
                <span :class="type_name?'color-242424':'color-acacac'">{{type_name||'请选择'}}</span><van-icon :name="!type_flag?'arrow-up':'arrow-down'" />
                <ul v-if="type_flag">
                  <li v-for="item in content_list" @click.stop="choose_handle(3,item)">{{item.name}}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="dialog-popup-form" style="margin-bottom: 0;">
            <span>排序</span>
            <div style="flex:1;">
              <input type="text" v-model="type_info.sort" placeholder="请输入"/>
            </div>
          </div>
          <div class="dialog-popup-tips">默认0，数值大的排在前面</div>
          <div class="dialog-popup-form" style="margin-bottom: 0;"  v-if="default_type=='text'" >
              <span style="align-self: baseline;padding-top: 0.5625rem;">文本消息</span>
              <div style="flex:1;">
                <div
                  :disabled="textSize >= maxNum"
                  ref="editInput"
                  class="edit"
                  id="editSelDiv"
                  contenteditable="true"
                  @input="editInput"
                  placeholder="请输入消息内容"
                  @paste="handlePaste"
                  spellcheck="true"
                   data-medium-editor-element="true"
                   role="textbox" 
                   aria-multiline="true" 
                >
                {{ innerHtml }}
                </div>
              </div>
          </div>
          <div class="dialog-popup-tips main-color" @click="push_textarea"   v-if="default_type=='text'" >
              客户昵称
          </div>
          <div class="dialog-popup-form"  v-else-if="default_type=='image'">
            <span style="align-self: baseline;padding-top: 0.5625rem;">上传图片</span>
              <div style="flex:1;text-align: left;">
                <van-uploader v-model="fileList" :max-count="1"  accept="image/*"   :after-read="onRead_2" :delete="delete_img"/>
              </div>
          </div>
          <template v-else-if="default_type=='link'">
            <div class="dialog-popup-form">
              <span>链接标题</span>
              <div style="flex:1;">
                  <input v-model="content_list[1].title"  rows="3" cols="10"  placeholder="请输入"></input>
                </div>
            </div>
            <div class="dialog-popup-form">
                <span>链接地址</span>
                <div style="flex:1;">
                  <input v-model="content_list[1].link"  rows="3" cols="10"  placeholder="请输入"></input>
                </div>
            </div>
            <div class="dialog-popup-form">
                <span>链接描述</span>
                <div style="flex:1;">
                  <input v-model="content_list[1].describe"  rows="3" cols="10"  placeholder="请输入"></input>
                </div>
            </div>
            <div  class="dialog-popup-form">
              <span>链接封面</span>
              <div style="flex:1;text-align: left;">
                <van-uploader v-model="fileList" accept="image/*"   :max-count="1"   :after-read="onRead_2" :delete="delete_img"/>
              </div>
            </div>
          </template>   
          <template v-else-if="default_type=='applet'">
            <div class="dialog-popup-form">
              <span>小程序标题</span>
              <div style="flex:1;">
                  <input v-model="content_list[2].title"  placeholder="请输入小程序标题,最多32个字"/>
                </div>
            </div>
            <div class="dialog-popup-form">
                <span>小程序appid</span>
                <div style="flex:1;">
                  <input v-model="content_list[2].appid"  placeholder="必须是关联到企业的小程序应用" />
                </div>
            </div>
            <div class="dialog-popup-form">
                <span>小程序page路径</span>
                <div style="flex:1;">
                  <input v-model="content_list[2].page"  placeholder="请输入小程序路径" />
                </div>
            </div>
            <div  class="dialog-popup-form">
              <span>小程序封面</span>
              <div style="flex:1;text-align: left;">
                <van-uploader v-model="fileList"  accept="image/*"  :max-count="1"   :after-read="onRead_2" :delete="delete_img"/>
              </div>
            </div>
          </template>
          <template v-else-if="default_type=='file'">
            <div  class="dialog-popup-form">
              <span style="align-self: baseline;padding-top: 0.5625rem;">上传文件</span>
              <div style="flex:1;text-align: left;">
                <van-uploader v-model="fileList"  :max-count="1"   :after-read="onRead_2" :delete="delete_img" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
              </div>
            </div>
          </template>
          <template v-else-if="default_type=='video'">
            <div  class="dialog-popup-form">
              <span style="align-self: baseline;padding-top: 0.5625rem;">上传视频</span>
              <div :style="content_list[4].link_video?'position:relative':'flex:1;text-align: left;'">
                <van-uploader  v-if="fileList.length==0" v-model="fileList"  :max-count="1"   :after-read="onRead_2" :delete="delete_img" accept="video/*"/>
                <video style="width: 6.25rem;"   v-else :src="content_list[4].link_video" controls="controls"></video>
                <div  v-if="content_list[4].link_video" class="video-del" @click="delete_img">
                  <van-icon name="cross" />
                </div>
              </div>
            </div>
          </template>
          <div class="dialog-popup-footer">
            <div class="dialog-popup-cancel" @click="show_add_dialog=false">取消</div>
            <div class="dialog-popup-add" @click="handle_form">新增</div>
          </div>
        </div>
    </van-dialog>
  </div>
</template>

<script>
let editDiv = null //编辑元素
let range = "" //选区
import { Toast } from "vant";
import { ImagePreview } from "vant";
import yzBlank from "components/ui_components/yz_blank";
import otherList from "../components/list.vue";
import { appAgentConfig } from "utils/wx_app_agent_mixin.js"; // 企业微信侧边栏应用授权
export default {
  mixins: [appAgentConfig],
  data() {
    return {
      pos:'',
      // 赋值
      innerHtml:'',// 初始化赋值
      innerHtmlBf:'',//备份数据
      nowHtmlT:'',// 实时html-动态变量
      nowText:'',// 实时文本
      // 获取当前最新数据
      getDataTime:1000,
      getDataTimeInter:null,
      textSize:0,
      maxNum:500,
      isInspection:false,
      uploadHtml:true,


      category_list:[],
      child_category:[],
      fileList:[],
      group_id:"",
      material_name:"",
      default_type:"text",
      type_info:{sort:""},
      sort:'',
      content_list:[
        {type:'text',name:'文本',news:""},
        {type:'link',name:'链接',describe:"",link:"",link_img:"",title:""},
        {type:'applet',name:'小程序',title:"",page:'',link_img:'',appid:''},
        {type:'file',name:'文件',link_file:"",condition:""},
        {type:'video',name:'视频',link_video:""},
        {type:'image',name:'图片',link_img:""}
      ],
      first_select_falg:false,
      type_flag:false,
      second_select_falg:false,
      first_category:"",
      second_category:"",
      show_add_dialog:false,
      last_page:1,
      isLoadMore:false,
      tab_list:{},
      child_group:[],
      child_active:0,
      wordKey: "",

      activeName: 'script_library',
      pluginTab: [{
        name:'话术库',
        value: 'script_library'
      }],//导航栏，开启的插件集合

      groupData: [],
      groupId: 0,
      userId: "",
      //二级子分类id
      groupTwoId:'',
      groupTwoData: [],
      //三级子分类id
      groupThrId:'',
      groupThrData: [],
      // 商品的分类等级
      level:'',
      showMoreClass:false,
      // 知识库和商品 搜索开关
      searchShow:false,

      page: 1,
      loading: false,
      finished: false,
      materialList: [],
      contextList: []
    };
  },
  created() {
    // 设置调用AgentConfig之后需要调用接口 appjsApiList
    this.appjsApiList = ["getCurExternalContact", "sendChatMessage"];
    this.agentConfigUrl = "plugin.speechcraft-library.frontend.controller.member.login.getConfig";
    // AgentConfig 之后的回调函数
    this.appSignSuccess = () => {
      //调用getCurExternalContact api文档：https://developer.work.weixin.qq.com/document/path/91799
      wx.invoke("getCurExternalContact", {}, res => {
        if (res.err_msg == "getCurExternalContact:ok") {
          this.userId = res.userId;
        }
      });
    };
  },

  activated() {
    this.show_add_dialog = false;
    this.isLoadMore = true;
    this.getGroupData();
    this.getPluginSetting();//获取导航栏数据
    this.getCategory()
  },


  deactivated() {
    if (document.getElementsByClassName('right-content')[0]) {
      document.getElementsByClassName('right-content')[0].removeEventListener("scroll", this.handleScrollEnterprise);
    }
  },
  methods: {

    initEditFun(){
      editDiv = document.getElementById("editSelDiv")
      editDiv.addEventListener("blur", () => {
        // 这一步是保留住edit编辑框中的选区的范围对象。
        // 否则失焦后，getSelection()方法返回的选区对象已经不再是编辑框了，已经获取不到编辑框中的范围对象了。
        range = window.getSelection()?window.getSelection().getRangeAt(0):''
      })
      document.addEventListener('selectionchange', (e) => {
        let selection = document.getSelection();
        let rangeVal = selection &&  selection.rangCount>0?selection.getRangeAt(0):''
        if (
          (rangeVal && this.hasAncestorWithId(rangeVal.commonAncestorContainer,'editSelDiv'))
        ) {
          range =  window.getSelection()?window.getSelection().getRangeAt(0):''
        }
      });
    },
    // 递归判断是否有父级id = editSelDiv
    hasAncestorWithId(element, id) {
      if (!element) return false;
      if (element.id === id) return true;
      if (element.parentNode) {
        return this.hasAncestorWithId(element.parentNode, id);
      }
      return false;
    },
    editInput(e) {
      this.getNowContent() //获取最新内容
      if(e.target.innerText == ''){
        range = ''
        e.target.innerHtml = ''
        this.innerHtml = ''
        this.innerHtmlBf = ''
      }
    },
  
    // 粘贴
    handlePaste(e){
      e.preventDefault(); // 阻止默认粘贴操作
      const clipboardData = e.clipboardData || window.clipboardData;
      const text = clipboardData.getData('text/plain'); // 获取纯文本内容
      document.execCommand('insertHTML', false, text); // 将文本插入 contenteditable 元素中
    },
    resevedSelDiv(){
      range = document.createRange();
      range.selectNode(document.getElementById("editSelDiv").lastChild);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
      let selection = window.getSelection()
      selection.selectAllChildren(editDiv)
      selection.collapseToEnd()
      range = window.getSelection()?window.getSelection().getRangeAt(0):''
    },
    // 获取最新的内容
    getNowContent(){
      const innerText = this.$refs.editInput.innerText
      const length = innerText.split('\u200B').join('').length;
      if(length<= this.maxNum){
        this.innerHtmlBf = this.$refs.editInput.innerHTML
        this.nowText = this.$refs.editInput.innerText;
        this.textSize = length
        this.isInspection=false

      }else{
        this.uploadHtml = false
        this.$nextTick(() => {
          this.innerHtml = this.innerHtmlBf
          this.uploadHtml = true
          setTimeout(()=>{
            this.resevedSelDiv()
          },1)
        });
      }
    },
  
    checkIsNonData(){
      const innerText = this.$refs.editInput.innerText
      const length = innerText.split('\u200B').join('').length
      if(innerText == '' || innerText == '\n' || length == 0){
        this.isInspection = true
      }else{
        this.isInspection = false
      }
    },
    beforeDestroy() {
      editDiv = null //编辑元素
      range = "" //选区
    },

    push_textarea(){
      let msgText = document.createElement("span");
          msgText.innerHTML = '客户昵称';
          msgText.style.color = "var(--themeBaseColor)";
          msgText.style.margin = "0 5px";
          msgText.setAttribute("contenteditable", "false")
      let div = document.getElementById(String('editSelDiv'));
      div.focus();
      let range = window.getSelection();
      range.selectAllChildren(div)
      range.collapseToEnd()
      this.pos =window.getSelection().getRangeAt(0);
      this.pos.insertNode(msgText);
      
    },
    getCategory(){
      $http.post('plugin.speechcraft-library.frontend.controller.member.Material.get-group-list').then(res=>{
        if(res.result){
          this.category_list = res.data;
        }
      })
    },
    delete_img(){
      this.fileList = [];
      if(this.default_type == 'link'){
          this.$set(this.content_list[1],"link_img",'')
        }else if(this.default_type == 'applet'){
          this.$set(this.content_list[2],"link_img",'')
        }else if(this.default_type == 'file'){
          this.$set(this.content_list[3],"link_file",'')
        }else if(this.default_type == 'video'){
          this.$set(this.content_list[4],"link_video",'')
        }else{
          this.$set(this.content_list[5],"link_img",'')
        }
    },
    onRead_2(e, flag) {
  
      let fd = new FormData();
      if (flag === true) {
        fd.append("file", e);
      } else {
        fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      }
      fd.append("attach", "upload");

      // 添加加载提示
      Toast.loading({message: ""});
      let url = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(url, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            if(this.default_type == 'link'){
              this.$set(this.content_list[1],"link_img",responseData.data.img_url)
            }else if(this.default_type == 'applet'){
              this.$set(this.content_list[2],"link_img",responseData.data.img_url)
            }else if(this.default_type == 'file'){
              this.$set(this.content_list[3],"link_file",responseData.data.img_url)
            }else if(this.default_type == 'video'){
              this.$set(this.content_list[4],"link_video",responseData.data.img_url)
            }else{
              this.$set(this.content_list[5],"link_img",responseData.data.img_url)
            }
    
            Toast.clear();
          } else {
            Toast(responseData.msg);
            Toast.clear();
          }
        })
        .catch(error => {
          console.log(error);
          Toast.clear();
        });
    },
    choose_handle(level,item){
      if(level==1){       
        this.second_category = "";
        if(item.child&&item.child.length!==0){
          this.child_category = item.child;
        }else{
          this.child_category  = [];
        }
        this.first_select_falg = false;
        this.first_category = item.group_name;
        this.group_id=item.id;
      }else if(level==2){
        this.second_select_falg = false;
        this.second_category = item.group_name;
        this.group_id=item.id;
      }else{
        this.type_flag = false;
        this.type_name = item.name;
        this.default_type = item.type;
        this.fileList = [];
        this.$set(this.content_list[1],"link_img",'')
        this.$set(this.content_list[2],"link_img",'')
        this.$set(this.content_list[3],"link_file",'')
        this.$set(this.content_list[4],"link_video",'')
        this.$set(this.content_list[5],"link_img",'')

      }     
    },
    handle_form(){
      let form = {
        material_name:this.material_name,
        sort:this.sort,
        group_id:this.group_id,
        content_list:[],
        is_enable:1
      };
      if(this.default_type=='image'){
        let obj = {...this.content_list[5],sort:this.type_info.sort}
        form.content_list.push(obj);
      }else if(this.default_type == 'text'){
        let obj = {type:'text',name:'文本',sort:this.type_info.sort,news:this.$refs.editInput.innerHTML}
        form.content_list.push(obj);
      }else if(this.default_type == 'link'){
        let obj = {...this.content_list[1],sort:this.type_info.sort}
        form.content_list.push(obj);
      }else if(this.default_type == 'applet'){
        let obj ={type:'applet',name:'小程序',title:this.content_list[2].title,page:this.content_list[2].page,link_img:this.content_list[2].link_img,appid:this.content_list[2].appid};
        form.content_list.push(obj);
      }else if(this.default_type == 'file'){
        let obj = {sort:this.type_info.sort,type:'file',link_file:this.content_list[3].link_file,condition:""}
        form.content_list.push(obj);
      }else{
        let obj = {type:'video',link_video:this.content_list[4].link_video,sort:this.type_info.sort}
        form.content_list.push(obj);
      }
       


      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.save-material",{'form':form},"loading").then(res=>{
        let {result,msg} = res;
        this.$toast(msg);
        if(result){
          this.show_add_dialog = false;
          this.first_category = '';
          this.second_category = '';
          this.fileList= [];
          this.type_info.sort = '';
          this.sort = '';
          this.type_name = '';
          this.material_name = '';
          this.innerHtml = "";
          this.group_id='';
          this.content_list=[
            {type:'text',name:'文本',news:""},
            {type:'link',name:'链接',describe:"",link:"",link_img:"",title:""},
            {type:'applet',name:'小程序',title:"",page:'',link_img:'',appid:''},
            {type:'file',name:'文件',link_file:"",condition:""},
            {type:'video',name:'视频',link_video:""},
            {type:'image',name:'图片',link_img:""}
          ];
          if(this.default_type == 'text'){
            this.$refs.editInput.innerHTML = "";
          }
     
        }
      })
    },
    add_handle(){
      this.fileList=[];
      this.type_info.sort = "";
      this.material_name = '';
      this.sort='';
      this.group_id='';
      this.show_add_dialog = true;
      this.$nextTick(()=>{
        this.initEditFun();
      })
    },
    change_child(item,i){
      this.child_active = i;
      console.log(item,"===");
      this.page = 1;
      this.group_id = item.id;
      let json = {
        page: 1,
        group_id: item.id,
        search: { material_name: this.wordKey }
      };
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getGroupMaterialList", json, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let resData = res.data;
        this.materialList = resData.data;
        if (this.page >= resData.last_page || resData.data.length < resData.per_page) {
          this.finished = true;
        }
        this.page++;
      });
    },
    closeSearchShow(){
      this.searchShow = false;
      this.page = 1;
      this.groupData = [];
      this.groupId = 0;
      this.groupTwoId = 0;
      this.groupThrId = 0;
      this.groupTwoData = [];
      this.groupThrData = [];
      this.loading = false;
      this.finished = false;
      this.wordKey = '';
      // 重新获取
      this.clickTabs();
    },
    onLoad(cateId){
      if(this.finished) return
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getContent", {
        cate_type: this.activeName,
        cate_id: cateId,
        keyword: this.wordKey,
        page:this.page
      }, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.contextList = this.contextList.concat(res.data.data);
        if(this.page >= res.data.last_page){
          this.finished = true;
        }else{
          this.page++;
        }

        console.log(this.page,res.data.last_page,this.finished)
      });
    },
    TwoName(){
      if(this.groupTwoData.length > 0){
        for(let i =0;i<this.groupTwoData.length;i++){
          if(this.groupTwoData[i].id == this.groupTwoId){
            return this.groupTwoData[i].name
          }
        }
      }
    },
    // 分组数据
    getGroupData() {
      $http.get("plugin.speechcraft-library.frontend.controller.member.Material.getGroupList").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.groupData = res.data;
        this.groupData.unshift({
          id: 0,
          group_name: "全部分组"
        });
        this.groupId = 0; // 默认选中第一个分组
        if(this.activeName == 'script_library'){
          this.getMaterialData();
        } 
      });
    },

    // 素材数据
    getMaterialData(page=1) {
      // if (this.finished) {
      //   return false;
      // }
      if(page==1){
        this.materialList = []
        document.getElementsByClassName('right-content')[0].scrollTop = 0;
      }
      let json = {
        page,
        group_id: this.groupId,
        search: { material_name: this.wordKey }
      };
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getGroupMaterialList", json, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.isLoadMore = true;
        let resData = res.data;
        this.materialList = resData.current_page > 1 ? this.materialList.concat(resData.data) : resData.data;
        // if (this.page >= resData.last_page || resData.data.length < resData.per_page) {
        //   this.finished = true;
        // }
        console.log(this.materialList,'ddddddddd');
        this.page = resData.current_page;
        this.last_page = resData.last_page;
        this.$nextTick(() => {
          let el = document.getElementsByClassName('right-content')[0];
          el.addEventListener("scroll", this.handleScrollEnterprise);
        });
      });
    },

    handleScrollEnterprise() {
      let el = document.getElementsByClassName('right-content')[0],
        scrollTop = el.scrollTop,
        clientHeight = el.clientHeight,
        scrollHeight = el.scrollHeight;
      if (scrollTop + clientHeight + 105 > scrollHeight) {
        if (this.isLoadMore) {
          if (this.page >= this.last_page) {
            return false;
          }
          this.isLoadMore = false;
          let page = this.page + 1;
          this.getMaterialData(page);
        }
      }
    },
    getPluginSetting(){
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getSetting", {}, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.tab_list = res.data.tab_list;
        // if(this.pluginTab.length != 1) return;
        // let {goods,article,communities,video,message_base} = res.data;
        // if(goods) this.pluginTab.push({name:'商品',value: 'goods'});
        // if(article) this.pluginTab.push({name:'文章',value: 'article'});
        // if(communities) this.pluginTab.push({name:'微社区',value: 'communities'});
        // if(video) this.pluginTab.push({name:'短视频',value: 'video'});
        // if(message_base) this.pluginTab.push({name:'知识库',value: 'message_base'});
        // console.log(this.pluginTab,'pluginTab')
        this.$nextTick(()=>{
          this.$refs.tabsPlu.resize();
        });
      });
    },
    clickTabs(){
      //切换了标签
      if(this.activeName == 'script_library') return this.getGroupData();
      this.contextList = [];
      this.searchShow = false;
      this.wordKey = '';
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getCategory", {
        cate_type: this.activeName,
        parent_id: 0,
        level: 1,
        per_page: 100
      }, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.groupData = res.data.data;
        this.groupId = res.data.data[0].id;
        this.level = res.data.level;
        this.page = 1;
        if(Number(res.data.level) > 1 && this.activeName == 'goods'){
          this.getNextChildTwo();
          return
        }
        if(this.activeName == 'communities'){
          this.getNextChildTwo();
        }
        this.getPluContent(this.groupId);//获取导航栏分类对应列表
      });
    },
    // 有二级则请求二级分类
    getNextChildTwo(){
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getCategory", {
        cate_type: this.activeName,
        parent_id: this.groupId,
        level: 2,
        per_page: 100
      }, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.groupTwoData = res.data.data;
        let all = {
          id:this.groupId,
          level:2,
          name: "全部",
          parent_id: 0
        }
        this.groupTwoData.unshift(all);
        //默认第一个 子id
        this.groupTwoId = res.data.data[0].id;
        if(this.activeName == 'communities' || Number(res.data.level) > 1 ){
          if(res.data.data[0].name == '全部'){
            this.getPluContent(this.groupId);//获取导航栏分类对应列表
          }else{
            this.getPluContent(this.groupTwoId);//获取导航栏分类对应列表
          }
        }
      });
    },
    // 请求三级
    getNextChildThr(){
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getCategory", {
        cate_type: this.activeName,
        parent_id: this.groupTwoId,
        level: 3,
        per_page: 100
      }, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        if(res.data.data.length > 0){
          this.groupThrData = res.data.data;
          let all = {
            id:this.groupTwoId,
            level:3,
            name: "全部",
            parent_id: 0
          }
          this.groupThrData.unshift(all);
          //默认第一个 子id
          this.groupThrId = res.data.data[0].id;
          this.getPluContent(this.groupThrId);//获取导航栏分类对应列表
        }else{
          this.getPluContent(this.groupTwoId);
        }

      });
    },
    getPluContent(cate_id){
      this.finished = false;
      this.$refs.otherList.cateId = cate_id?cate_id:'0';
      this.loading = true;
      this.showMoreClass = false;
      console.log(this.finished,this.page,'getPluContentgetPluContent')
      //获取导航栏分类对应列表
      $http.post("plugin.speechcraft-library.frontend.controller.member.Material.getContent", {
        cate_type: this.activeName,
        cate_id: cate_id,
        keyword: this.wordKey,
        page:this.page
      }, "loading").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.contextList = res.data.data;
        this.loading = false;
        if(this.page >= res.data.last_page){
          this.finished = true;
        }else{
          this.page++;
        }

        console.log(this.page,res.data.last_page,this.finished)
      });
    },
    changeTwoGroup(groupTwo_id){
      this.page = 1;
      if(this.activeName == 'goods'){
        if(groupTwo_id == 0){
          this.groupTwoId = this.groupId;
        }else{
          this.groupTwoId = groupTwo_id;
        }
        if(Number(this.level > 2)){
          this.groupThrData = [];
          this.getNextChildThr();
          return
        }else{
          this.getPluContent(this.groupTwoId);
          return
        }
      }
      if(this.activeName == 'communities'){
        console.log('communities')
        this.groupTwoId = groupTwo_id;
        this.getNextChildThr();
      }
    },
    // 点击切换三级
    changeThrGroup(groupThr_id){
      this.page = 1;
      this.groupThrId = groupThr_id;
      this.getPluContent(this.groupThrId);//获取导航栏分类对应列表
    },
    // 切换分组
    changeGroup(group_id) {
      console.log(group_id,'group_id')
      //切换了标签
      if(this.activeName != 'script_library'){
        if (this.groupId == group_id) {
          return false;
        }
        this.page = 1;
        if(Number(this.level > 1) && this.activeName == 'goods'){
          this.groupId = group_id;
          this.contextList = [];
          this.groupTwoData = [];
          this.groupThrData = [];
          this.getNextChildTwo();
          return
        }else if(this.activeName == 'communities'){
          this.groupId = group_id;
          this.contextList = [];
          this.groupTwoData = [];
          this.getNextChildTwo();
          return
        }else{
          this.contextList = [];
          this.groupId = group_id;
          this.getPluContent(this.groupId);//获取导航栏分类对应列表
        }

      }
      if (this.groupId == group_id) {
        return false;
      }
      this.groupId = group_id;
      this.page = 1;
      this.finished = false;
      this.child_group=[];
      let arr = this.groupData.filter(item=>item.id==group_id);
      if((arr&&arr.length!==0)&&(arr[0].child&&arr[0].child.length!==0)){
        let _arr = arr[0].child;
        console.log(arr[0].child,'child',_arr);
        if(_arr.findIndex(item=>item.group_name=='全部') == -1){
          _arr.unshift({id: arr[0].id,group_name: "全部"})
        }
        console.log(_arr);
        this.child_group = _arr;
        this.groupId = arr[0].id;
      }
      this.getMaterialData();
    },

    // 搜索
    searchMaterial() {
      this.page = 1;
      this.finished = false;
      if(this.activeName == 'script_library'){
        this.getMaterialData();
      }else{
        this.searchShow = true;
        this.getPluContent();
      }
    },

    // 获取文件名
    getFileNameByPath(path) {
      var index = path.lastIndexOf("/");
      var fileName = path.substr(index + 1);
      return fileName;
    },

    // 一键发送
    batchSendMessage(id) {
      if (!this.isSignWorkApp) {
        return this.$dialog.confirm({
          title: "提示",
          message: "企业应用未授权成功!"
        });
      }
      this.$dialog
        .confirm({
          title: "提示",
          message: "该操作将发送当前素材的全部话术，确认全部发送吗？"
        })
        .then(() => {
          this.getMediaId(id);
        });
    },

    // 单条发送
    sendMessage(id, index,lid) {
      if (!this.isSignWorkApp) {
        return this.$dialog.confirm({
          title: "提示",
          message: "企业应用未授权成功!"
        });
      }
      this.getMediaId(id, index,lid);
    },

    // 获取素材里所有媒体消息的media_id
    getMediaId(id, messageIndex,lid) {
      return $http.get("plugin.speechcraft-library.frontend.controller.member.Material.getMaterialContent", { material_id: id, external_userid: this.userId },'加载中').then(res => {
        if (res.result != 1) {
          return this.$toast(res.msg);
        }
        this.sendChatMessage(res.data, messageIndex,lid);
      });
    },
    sendChatMessageChildList(item){
      console.log(item,'dddddd')
      // if (!this.isSignWorkApp) {
      //   return this.$dialog.confirm({
      //     title: "提示",
      //     message: "企业应用未授权成功!"
      //   });
      // }
      this.sendChatMessage_childList(item)
    },
    sendChatMessage_childList(item){
      const Loading = Toast.loading();
      let chatMessConfig = this.messageConfig(item);
      wx.invoke("sendChatMessage", chatMessConfig, res => {
        if (res.err_msg == "sendChatMessage:ok") {
          Toast.success("话术已生成，请点击聊天框发送按钮！");
        } else {
          Toast.fail("话术发送失败");
        }
        Loading.close();
      });
    },
    // 调用 sendChatMessage api文档：https://developer.work.weixin.qq.com/document/path/94349
    sendChatMessage(list, messageInd,lid) {
      const Loading = Toast.loading();
      // if (messageInd !== undefined && messageInd !== "" && typeof messageInd == "number") {
      if (lid !== undefined && lid !== "" && typeof lid == "number") {
        let item = null;
        list.forEach((obj,index)=>{
          if(obj.id == lid){
            item = list[index];
          }
        });
        let chatMessConfig = this.messageConfig(item);
        wx.invoke("sendChatMessage", chatMessConfig, res => {
          if (res.err_msg == "sendChatMessage:ok") {
            Toast.success("话术已生成，请点击聊天框发送按钮！");
          } else {
            Toast.fail("话术发送失败");
          }
          Loading.close();
        });
      } else {
        list.forEach((item, index) => {
          let chatMessConfig = this.messageConfig(item);
          wx.invoke("sendChatMessage", chatMessConfig, res => {
            if (res.err_msg == "sendChatMessage:ok") {
              //全部发送成功
              if (index === contentList.length - 1) {
                Loading.close();
                Toast.success("话术已生成，请点击聊天框发送按钮！");
              }
            } else {
              Loading.close();
              Toast.fail("话术发送失败");
            }
          });
        });
      }
    },

    // 消息分享配置
    messageConfig(_config) {
      let configObj = {};
      console.log(_config)
      let config = _config.content || _config;
      if (config.type == "text") {
        configObj = {
          msgtype: "text",
          text: { content: config.news }
        };
      } else if (config.type == "link") {
        configObj = {
          msgtype: "news",
          news: {
            link: config.link || config.type, //H5消息页面url 必填
            title: config.title ? config.title : "", //H5消息标题
            desc: config.describe, //H5消息摘要
            imgUrl: config.link_img
          }
        };
      } else if (config.type == "applet") {
        configObj = {
          msgtype: "miniprogram",
          miniprogram: {
            appid: config.appid, //小程序的appid，企业已关联的任一个小程序
            title: config.title, //小程序消息的title
            imgUrl: config.link_img, //小程序消息的封面图。
            page: config.page //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面
          }
        };
      } else if (config.type == "image") {
        configObj = {
          msgtype: "image",
          image: { mediaid: config.media_id }
        };
      } else if (config.type == "video") {
        configObj = {
          msgtype: "video",
          video: { mediaid: config.media_id }
        };
      } else if (config.type == "file") {
        configObj = {
          msgtype: "file",
          file: { mediaid: config.media_id }
        };
      }
      return configObj;
    },

    // 图片预览
    imagePreview(imgUrl) {
      ImagePreview([imgUrl]);
    }
  },
  components: { yzBlank,otherList }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>


.edit{
  width: 12.8125rem;
  height: 6.4375rem;
  overflow-y: auto;
  border: 1px solid #DEE0E5;
  border-radius: 0.125rem;
  padding: .5rem .4375rem;
  text-align: left;
}
.edit:focus {
  outline: 0;
  border-color: #409EFF;
}
#editDivBody{
  width: 100%;
  //height:203px;
  overflow-y: auto;
  background: #FAFBFC;
  border-radius: 4px;
  border: 1px solid #DCDEE6;
  padding: 12px 12px 20px 13px;
  margin-left: 8px;
  position: relative;
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background-color:  #D8D8D8;
}
::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}
.color-acacac{
color:#ACACAC !important;
}
.icon-icon_add{
  color:var(--themeBaseColor);
}
.main-color{
  color:var(--themeBaseColor) !important;
}
.color-242424{
  color:#242424;
}

.video-del{
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background-color: rgba(0, 0, 0, .7);
  border-radius: 0 0 0 12px;

} 
.video-del ::v-deep .van-icon-cross{
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}
.dialog-popup{
  width: 18.75rem;
  max-height: 30rem;
  background: #FFFFFF;
  border-radius: 0.5rem;
  overflow-y: scroll;
  padding-bottom: 3.9063rem;
  &-tips{
    color: #929292;
    font-size: 0.5625rem;
    text-align: left;
    line-height: 1;margin-top: .2813rem;
    padding-left: 5rem;
    margin-bottom: .75rem;
  }
  ul{
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    z-index: 100;
    background-color: #fff;
    padding: 1.1875rem 0.4375rem;
    box-shadow: 0rem 0.1875rem 0.625rem 0.0313rem rgba(0,0,0,0.06);
    border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;
    border: 1px solid #DEE0E5;
  }
  li{
    margin-bottom: 1.25rem;
    font-weight: 400;
    font-size: 0.75rem;
    color: #242424;
  }
  li:last-child{
    margin-bottom: 0;
  }
  .select{
  position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    text-align: left;
    color: #ACACAC;
    span{flex:1;text-align: left;padding-left: 0;}
  }
  input,textarea,.select{
    display: block;
    border: 1px solid #DEE0E5;
    border-radius: .125rem;
    // overflow: hidden;
    width: 100%;
    padding: .5625rem 0.4375rem;
    font-weight: 400;
    font-size: 0.75rem

  }
  &-form{
    display: flex;
    align-items: center;
    padding-right: .9375rem;
    margin-bottom: .75rem;
    input::-webkit-input-placeholder{
      color:#ACACAC;
    }  
    textarea::-webkit-input-placeholder{
      color:#ACACAC;
    }
    span{
      width: 5rem;
      text-align: left;
      padding-left: .9375rem;
      font-weight: 400;
      font-size: 0.75rem;
      color: #242424;
    }
  }
  &-title{
    font-weight: bold;
    font-size: 0.9375rem;
    color: #242424;
    text-align: left;
    line-height: 1;
    margin:1.0313rem .9375rem 0.9688rem;
  }
  &-footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    padding: 1rem 1.5625rem;
    max-height: 31.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-cancel{
    width: 7.5rem;
    font-size: 0.625rem;
    height: 1.5625rem;
    line-height:  1.5625rem;
    border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;
    border: 1px solid var(--themeBaseColor);
    color: var(--themeBaseColor);
  }
  &-add{
    font-size: 0.625rem;
    width: 7.5rem;
    color:#fff;
    height: 1.5625rem;
    line-height:  1.5625rem;
    background-color: var(--themeBaseColor);
    border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;
    border: 1px solid var(--themeBaseColor);
  }

}
.child-category ::v-deep .van-tab{
    color:#000;
    text-align: center;
    border-radius: 0.625rem;
}
.child-category ::v-deep  .van-tabs__line{
display: none;
}
::v-deep .van-search__content{
  border-radius: 0.3125rem;
  overflow: hidden;
}
.speech-lib-wrap {
  background-color: #fff;
  .child-category{
    padding-top: .625rem;
    padding-bottom: .25rem;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    align-items: center;
  }
  .child-category-item-c{
    padding: .3438rem .5rem;
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: #F14E4E !important;
    border-radius: .125rem;
    text-align: center;
    font-size: .625rem;
    margin-bottom: .5rem;
    color:#fff !important;
    margin-right: .5rem;
  }
  .child-category-item{
    padding: .3438rem .5rem;
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: .625rem;
    color:#242424;
    background-color:#fff;
    text-align: center;
    border-radius: .125rem;
    margin-bottom: .5rem;
    margin-right: .5rem;
  }

  .search-box {
    border-bottom: 1px solid #F6F6F6;
    .van-search  input::-webkit-input-placeholder{
      color:#666666;
    }
    ::v-deep .van-search {
      padding: 0.84rem;
    }

    .search-btn {
      width: 2.7813rem;
      height: 1.5625rem;
      line-height: 1.5625rem;
      background: var(--themeBaseColor);
      text-align: center;
      color:#fff;
      border-radius: 0.25rem;
      font-size: 0.75rem;
      cursor: default;
    }
  }

  .btn {
    cursor: pointer;
  }

  .send-btn {
    padding: 0.34rem 0.66rem;
    background-color: #f14e4e;
    border-radius: 0.13rem;
    font-size: 0.63rem;
    color: #fff;
  }

  .contain {
    font-size: 12px;
    display: flex;
    height: calc(100vh - 54px - 44px - 1px);

    .left-sidebar-box {
      width: 5rem;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      text-align: center;

      .active {
        color: #f15353;
      }

      .side-item {
        cursor: default;
        padding: 1rem 0;
        word-break: break-all;
      }
    }

    .right-content {
      flex: 1;
      height: 100%;
      padding: 0 0.5rem;
      background-color: #f6f6f6;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;

      .childSidebar_box-sticky {
        position: sticky;
        top: -1px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .childSidebar_box-postion {
        position: absolute;
        top: 0;
        left: 0.5rem;
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .closeThr {
        color: #929292;
        display: flex;
        align-items: center;
        justify-content: center;

        .van-icon {
          margin-left: 0 !important;
        }
      }

      .childSidebar_box {
        padding-top: 0.81rem;
        padding-bottom: 0.84rem;
        box-sizing: border-box;
        background: #f6f6f6;

        .van-icon {
          margin-left: 1.25rem;
        }
        // 三级
        .childSideBar-thr {
          padding-left: 0.5rem;
          margin-top: 1rem;

          .twoSpan {
            text-align: left;
            font-size: 0.4375rem;
            font-weight: 400;
            padding: 0 0.55rem;
            margin-bottom: 0.44rem;
          }

          .childSidebar_nav-thr {
            display: flex;
            flex-wrap: wrap;

            .navthr {
              padding: 0.44rem 0.55rem;
              font-size: 0.3438rem;
            }

            .defultVal-thr {
              color: #df5a55;
              border: 1px solid #df5a55;
            }
          }
        }
        // 二级
        .childSidebar::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }

        .childSidebarScroll {
          overflow-x: scroll;
        }

        .childSidebarWarp {
          display: flex;
          flex-wrap: wrap;
        }

        .childSidebar {
          flex: 1;
          padding-left: 0.5rem;
          display: flex;

          /* 隐藏滚动条 */
          scrollbar-width: none; /* firefox */
          -ms-overflow-style: none; /* IE 10+ */
        }

        .defultVal {
          background: #f14e4e !important;
        }

        .childSidebar_nav_Warp {
          margin-bottom: 0.63rem;
        }

        .childSidebar_nav {
          flex-shrink: 0;
          padding: 0.5rem 1rem;
          font-weight: 400;
          color: #fff;
          font-size: 0.69rem;
          background: #e5e5e5;
          border-radius: 0.84rem;
          margin-right: 0.63rem;
        }
      }
      .mt-40{
        margin-top: 1.25rem !important;
      }
      .material-box {
        margin: 0 0 .75rem;
        .material-item:first-child{
          margin-top: 0;
        }
        .material-item {
          margin:1.25rem 0;
        }

        .top {
          margin-bottom: 0.8rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .sendAll-btn {
          padding: 0.41rem 0.63rem;
          font-size: 0.63rem;
          color: #fff;
          background-color: var(--themeBaseColor);
          border-radius: 0.13rem;
        }

        .message-list {
          background-color: #fff;
          border-radius: 0.13rem;
          border-bottom: 1px solid #efefef;

          .message-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.63rem;
            color: #242424;

            .message-content {
              flex: 1;
              max-width: 11rem;
              text-align: left;
            }

            .img-box {
              width: 4.5rem;
              height: 4.5rem;
              overflow: hidden;
              background-color: #ccc;
              border-radius: 0.13rem;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .h5-box {
              display: flex;

              .h5-img {
                width: 2.81rem;
                height: 2.81rem;
                background-color: #ccc;
                border-radius: 0.13rem;
                object-fit: cover;
              }

              .h5-text {
                flex: 1;
                margin-left: 0.5rem;
                font-size: 0.75rem;
                color: #242424;
              }

              .desc {
                margin-top: 0.5rem;
                font-size: 0.69rem;
                color: #666;
              }
            }

            .min-pro-box {
              .min-img {
                margin-top: 0.3rem;
                width: 4.97rem;
                height: 4.97rem;
                background-color: #b8b8b8;
                border-radius: 0.13rem;
              }

              .icon-all_smallprogram {
                color: #7879f0;
              }
            }

            .video-box {
              width: 10.97rem;
              height: 6.97rem;
              background-color: #b8b8b8;
              border-radius: 0.13rem;

              video {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }

            .file-box {
              color: #606266;
              word-break: break-all;
            }
          }

          .message-item::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            transform: scaleY(0.5);
            background-color: #f6f6f6;
          }
        }
      }
    }
  }
}
</style>
